<script>
  import Navigation from '../../../config/seller/navigation';

  const data = {
      menu : Navigation.menu,
      height : window.innerHeight - 142
  };

  window.onresize = function () {
      data.height = window.innerHeight - 142;
  };


  export default {
      name: 'app',
      data () {
          return data;
      },
      computed: {
          activeMenu : function () {
              for(let name in Navigation.menu){
                  if(Navigation.menu[name].active){
                      if(Navigation.menu[name].subs === undefined)
                          return {};
                      else return Navigation.menu[name].subs;
                  }
              }
          },
          breadcrumb : function () {
              let item = [];
              if(Navigation.menu.home.active)
                  return item;
              for(let name in Navigation.menu){
                  if(Navigation.menu[name].active){
                      item.push(Navigation.menu[name]);
                      if(Navigation.menu[name].subs === undefined)
                          return item;
                      for(let index in Navigation.menu[name].subs){
                          if(Navigation.menu[name].subs[index].active)
                              item.push(Navigation.menu[name].subs[index]);
                      }
                  }
              }
              return item;
          }
      },
      methods : {

      }
  }
</script>

<template>
  <div>
    <header class="box-full">
      <div class="box-wrapper">
        <div class="logo">
          <h1>管理中心</h1>
        </div>
        <ul class="menu">
          <router-link v-for="item in menu" :key="item.id" :to="item.route">
            <li :class="{ active : item.active }">
              {{ item.title }}
              <div class="arrow"></div>
            </li>
          </router-link>
        </ul>
        <div class="user">
          <!-- 用户登陆状态信息 -->
        </div>
        <div style="clear: both"></div>
      </div>
    </header>
    <div class="box-wrapper">
      <div class="navigate">
        <div class="top">
          <i class="logo el-icon-menu"></i>
        </div>
        <ul>
          <li v-for="item in activeMenu" :key="item.id" :class="{ active : item.active }">
            <router-link :to="item.route">{{ item.title }}</router-link>
          </li>
        </ul>
      </div>
      <div class="content" :style="{ minHeight: height + 'px' }">
        <el-breadcrumb class="top" separator="/">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id" :to="item.route">{{ item.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </div>
      <div style="clear: both"></div>
    </div>
    <footer>
      <p>
        <a href="/">首页</a>
        | <a href="#">招聘英才</a>
        | <a href="#">合作及洽谈</a>
        | <a href="#">联系我们</a>
        | <a href="#">关于我们</a>
        | <a href="#">物流自取</a>
        | <a href="#">友情链接</a>
      </p>
      Copyright 2017 <a href="" target="_blank">Swiftx商城</a> All rights reserved.
    </footer>
  </div>
</template>

<style type="text/css">
  .box-full{
    width: 100%;
  }
  header.box-full{
    background-color: #15aee4;
    height: 72px;
  }
  .box-wrapper{
    width: 1200px;
    margin: auto;
  }
  header .box-wrapper .logo{
    width: 188px;
    height: 60px;
    float: left;
    padding: 6px;
  }
  header .box-wrapper .logo h1{
    margin: 0;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 25px;
    text-align: center;
    color: #fff;
    font-family: "Microsoft YaHei",serif;
  }
  header .box-wrapper ul.menu{
    list-style: none;
    float: left;
    width: 800px;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  header .box-wrapper ul.menu li{
    color: #fff;
    height: 72px;
    line-height: 77px;
    font-weight: bold;
    float: left;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 14px;
    padding: 0 20px;
  }
  header .box-wrapper ul.menu li .arrow{
    display: none;
    font-size: 0;
    line-height: 0;
    background-color: transparent;
    width: 0;
    height: 0;
    margin: 0;
    border-width: 7px;
    border-color: transparent transparent #FFF transparent;
    border-style: dashed dashed solid dashed;
    position: relative;
    z-index: 1;
    top: -18px;
    left: 50%;
    margin-left: -7px;
    box-shadow: none;
  }
  header .box-wrapper ul.menu li:hover{
    background-color: #44bee9;
  }
  header .box-wrapper ul.menu li.active{
    background-color: #44bee9;
  }
  header .box-wrapper ul.menu li.active .arrow{
    display: block;
  }
  .box-wrapper .navigate{
    width: 200px;
    float: left;
    padding: 6px 0;
  }
  .box-wrapper .navigate ul{
    list-style: none;
    padding: 0;
  }
  .box-wrapper .navigate ul li{
    font-size: 13px;
    line-height: 28px;
    color: #666;
    padding: 3px 0;
    height: 30px;
    text-align: center;
  }
  .box-wrapper .navigate ul li.active{
    height: 28px;
    background-color: #FFF;
    border-style: solid;
    border-color: #E6E9EE #FFF #E6E9EE #3BAEDA;
    border-width: 1px 0 1px 2px;
  }
  .box-wrapper .navigate ul li.active a{
    background-color: #FFF;
    color: #3BAEDA;
  }
  .box-wrapper .navigate ul li a{
    font-size: 13px;
    line-height: 24px;
    color: #666;
    text-decoration: none;
  }
  .box-wrapper .navigate .top{
    background-color: #FFF;
    width: 96px;
    height: 96px;
    margin: 15px auto 25px auto;
    border: solid 1px #DDD;
    border-radius: 15px;
    box-shadow: 0 0 0 4px rgba(204,204,204,0.25);
    text-align: center;
  }
  .box-wrapper .navigate .top .logo{
    font-size: 76px;
    margin: 10px auto 0 auto;
    color: #11b9a2;
  }
  .content {
    width: 1000px;
    background-color: #FFF;
    float: right;
  }
  .content .top{
    padding:10px 0 10px 10px;
    border-bottom: solid 1px #F5F5F5;
  }
  footer{
    line-height: 20px;
    color: #CCD0D9;
    background: #15aee4;
    text-align: center;
    font-size: 12px;
    padding-bottom: 10px;
  }
  footer p{
    margin: 0;
    color: #FFF;
    word-spacing: 5px;
    padding: 10px 0;
  }
  footer a{
    color: #FFF;
    text-decoration: none;
  }
</style>
